<template>
    <div id="Header">
        <!-- 折叠菜单按钮 -->
        <el-icon
            class="button-collapse"
            :class="{ clickCollapse: store.state.isCollapse }"
            style="font-size: 16px;"
            @click="store.commit('menuToggle')"
        >
            <expand />
        </el-icon>

        <el-icon @click="handleRefresh" class="btn-refresh">
            <refresh-right />
        </el-icon>

        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb no-select hidden-xs-only">
            <el-breadcrumb-item v-for="item in breadList" :to="{ path: item.path }">{{ item.name }}</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 主题切换 -->
        <div class="switchWrap" :class="{ toggle: isDark }" @click="handleTheme">
            <i class="iconfont icon-dark"></i>
            <i class="iconfont icon-ai250"></i>
            <div class="ball"></div>
        </div>

        <!-- 头像 + 下拉菜单 -->
        <el-dropdown>
            <div class="faceWrap no-select">
                <img :src="store.state.userInfo.mockFace" alt class="face" />
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item :icon="User">个人信息</el-dropdown-item>
                    <el-dropdown-item :icon="SwitchButton" @click="logOut">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { ArrowRight, User, SwitchButton } from '@element-plus/icons-vue';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import anime from 'animejs/lib/anime.es.js';
import storage from '@/utils/storage';

const store = useStore()
const route = useRoute()
const router = useRouter()

// 面包屑列表
const breadList = computed(() => route.matched)

// 主题切换
const isDark = ref(false)
function handleTheme () {
    isDark.value = !isDark.value
    store.commit('themeToggle', isDark.value)
}

// 处理刷新按钮
function handleRefresh () {
    anime({
        targets: '.btn-refresh',
        rotate: '1turn',
        duration: 300,
        color: 'rgba(0,0,0,1)',
        // easing: 'easeInOutExpo',
    })
    router.go(0)
}


// 退出登录
const logOut = () => {
    store.commit('saveUserInfo', '')
    storage.removeItem('userInfo')
    router.push('/login')
}

</script> 

<style lang='less' >
#Header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    .button-collapse {
        transform: rotate(180deg);
        transition: all 0.3s ease;
        color: var(--color2);
        cursor: pointer;
    }
    // 刷新按钮
    .btn-refresh {
        cursor: pointer;
        margin-left: 10px;
        font-weight: 700;
        color: var(--color2);
        // transition: all 0.3s ease;
    }
    // 折叠图标 点击后旋转
    .clickCollapse {
        transform: rotate(0);
    }
    // 面包屑
    .breadcrumb {
        flex: 1;
        padding-left: 20px;

        // 标签
        .el-breadcrumb__inner {
            cursor: pointer;
            color: var(--color2);
        }
    }
    // 主题切换
    .switchWrap {
        position: relative;
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 32px;
        height: 18px;
        border-radius: 10px;
        padding: 1px;
        margin-right: 15px;
        cursor: pointer;
        border: 1px solid #fff;
        transition: all 0.3s ease;
        background-color: var(--bgColor4);
        .ball {
            position: absolute;
            left: 1px;
            top: 1px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background-color: var(--bgColor3);
            transition: all 0.3s ease;
        }
        .iconfont {
            color: var(--color2);
        }
        .icon-dark {
            font-size: 12px;
        }
        &.toggle {
            background-color: #130e06;
            border: 1px solid var(--bgColor3);
            .ball {
                left: 52%;
            }
        }
    }

    .faceWrap {
        width: 40px;
        height: 40px;
        overflow: hidden;
        border-radius: 50%;
        cursor: pointer;
        img {
            width: 40px;
        }
    }
}
</style>
